<template>
  <div class="secure-head flex justify-between align-center">
    <div class="text-16 text-bold">密码柜</div>
    <div class="flex gc-4">
      <div class="secure-button import" @click="importConfig">导入</div>

      <div class="secure-button export gc-2 align-center" @click="exportConfig">
        <div>导出</div>
        <img :src="exportPng" width="16" />
      </div>
      <div class="secure-button setting px-0" @click="showSource">
        <img :src="github" width="32" />
      </div>
      <div class="secure-button setting px-0" @click="showSetting">
        <img :src="setting" width="32" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import exportPng from '@/assets/images/export.png';
  import github from '@/assets/images/github.png';
  import { programData } from '@/store/modules/program/utils';
  import { downloadText, toText, useUploadFile } from '@/utils/file';
  import setting from '@/assets/images/settings.png';
  import { show } from '../settings/bus';
  import { show as srouce } from '../source/bus';
  import { notify } from '../notify/bus';

  const exportConfig = () => {
    const data = programData();
    const { exportType } = data.config;

    function jsonToTable(json: object[]): string {
      // 获取所有键名
      const keys = Object.keys(json[0]);

      // 构造表头
      let table = '|';
      // eslint-disable-next-line no-restricted-syntax
      for (const key of keys) {
        table += `${key} |`;
      }
      table += '\n';

      // 构造表格主体
      // eslint-disable-next-line no-restricted-syntax
      for (const row of json) {
        table += '|';
        // eslint-disable-next-line no-restricted-syntax
        for (const key of keys) {
          table += `${row[key]} |`;
        }
        table += '\n';
      }

      return table;
    }
    switch (exportType) {
      case 'json':
        downloadText(JSON.stringify(data.list), 'config.json');
        break;
      case 'text':
        // eslint-disable-next-line no-case-declarations
        const tableText = jsonToTable(data.list);
        downloadText(tableText, 'config.txt');
        break;

      default:
        break;
    }
  };
  const showSource = () => {
    srouce.value = true;
  };
  const showSetting = () => {
    show.value = true;
  };

  const importConfig = async () => {
    const json = await useUploadFile({
      accept: 'application/json',
    });

    notify({
      title: '警告',
      msg: '导入将会覆盖当前所有记录',
      async onConfirm() {
        const file = json[0];
        const text = await toText(file);
        const data = programData();
        data.list = JSON.parse(text);
      },
    });
  };
</script>

<style lang="scss" scoped>
  .secure-head {
    height: 48px;
    padding: var(--padding);
    background-color: var(--bgcolor);
    box-shadow: 0 1px 5px #80808056;
    .export {
      color: var(--primary);
      display: flex;
      background-color: white;
      &:hover {
        color: white;
        background-color: var(--primary);
      }
    }
    .import {
      &:hover {
        color: var(--primary);
        background-color: white;
      }
    }
    .setting {
      border: 1px solid #eee;
      &:hover {
        background-color: #ffbdeb;
      }
    }
  }
</style>
